<template>
    <q-item clickable v-ripple exact @click="selectMenuItem(trueItem)" :inset-level="initLevel" :active="checkActive"
        :active-class="active_class" :dense="sidebarDense">
        <q-item-section avatar class="flex-center min-w-5">
            <!-- <q-icon :name="trueItem.icon" /> -->
            <el-icon v-if="trueItem.meta.icon">
                <component :is="trueItem.meta.icon" />
            </el-icon>
        </q-item-section>
        <q-item-section>
            {{ trueItem.meta.title }}
            <!-- {{ selectOptionLabel(trueItem) }} -->
        </q-item-section>
    </q-item>
</template>

<script setup lang="ts">
// @ts-nocheck==
import { computed, inject, ref, toRefs, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import useTheme from '@/hooks/useTheme';
// import useCommon from 'src/composables/useCommon';
import { useSettingStore } from "@/stores/setting";

const settingStore = useSettingStore();
// const { selectOptionLabel } = useCommon()

const { darkThemeSelect } = useTheme()
const active_class = computed(() => {
    let res = "active"
    return res
})

// console.log(`darkThemeSelect 👉`,darkThemeSelect.value)
const router = useRouter()
const route = useRoute()

import { useRouterStore } from "@/stores/use_router_store";
const routerStore = useRouterStore();
const props = defineProps({
    trueItem: {
        default: function () {
            return {}
        },
        type: Object,
    },
    initLevel: {
        type: Number,
        default: 0,
    },
})
const { trueItem, initLevel } = toRefs(props)

const sidebarDense = computed(() => settingStore.GetSidebarDense())

const selectMenuItem = (trueItem) => {
    const index = trueItem.name
    const query = {};
    const params = {};
    // console.log(`routerStore.routeMap 👉`, routerStore.routeMap)
    routerStore.routeMap[index]?.parameters &&
        routerStore.routeMap[index]?.parameters.forEach((item) => {
            if (item.type === "query") {
                query[item.key] = item.value;
            } else {
                params[item.key] = item.value;
            }
        });
    if (index === route.name) return;
    if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
        window.open(index);
    } else {
        router.push({ name: index, query, params });
    }
};

const checkActive = computed(() => {
    if (route.name === trueItem.value.name) {
        return true
    }
    return false
})
</script>
